<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  ul{
   display: flex;
  }
  li{ 
   margin-right: 20px;
  }
  body{
   margin: 50px;
  }
  .box{
    margin-top: 20px;
  }
  .active{
    color: green;
  }
</style>
<body>
  <ul> 
  </ul>
 <div class="box">
    <span>商品名称:</span>
    <input type="text" onchange="change(this)">
 </div>
 <div class="footBtn">
   
 </div>
 <ol>

 </ol>
</body>
</html>
<script>
  let list = [{
    name: "第一步",
    value: "",
    dec: "商品名称"
  },{
    name: "第二步",
    value: "",
    dec: "商品价格"
  },{
    name: "第三步",
    value: "",
    dec: "商品图片"
  },{
    name: "最后一步",
    value: "",
    dec: "商品库存"
  }]
 let checkIndex = 0; // 选中的步骤
 render();
 function render() {
    let str = "";
    list.forEach((item,index) => {
      str+=`<li onclick="cut(${index})" class="${checkIndex>=index?'active':''}">${item.name}</li>`
    })
    document.querySelector('ul').innerHTML = str;
    document.querySelector('.box span').innerHTML = list[checkIndex].dec;
    document.querySelector('.box input').value = list[checkIndex].value;
    // 判断按钮显示那个
    let btns = `${checkIndex>0?'<button onclick="up()">上一步</button>':''}${checkIndex==3?'<button onclick="submit()">提交</button>':'<button onclick="down()">下一步</button>'}`;

    document.querySelector('.footBtn').innerHTML = btns;
  }

  function cut(i){ // 切换事件
    if (list[checkIndex].value){
        checkIndex = i;
    } else {
      alert(list[checkIndex].dec + "不能为空！")
    }
    document.querySelector('.box input').value = "";
    render();
  }

  function change(dom){ // 输入框内容改变的事件
     console.log(dom.value);
     list[checkIndex].value = dom.value;
  }

  function up(){ // 上一步
    checkIndex--;
    render();
  }

  function down(){ // 下一步的函数
    let i = checkIndex;
    i++;
    cut(i);
    render();
  }
   

   function submit(){ // 提交的事件
     if(list[checkIndex].value){
       let str = "";
       list.forEach(item => {
        str+=`<li>${item.dec}: ${item.value}</li>`
       })
       str+=`<li><button onclick="cl()">清空重填</button></li>`
       document.querySelector('ol').innerHTML = str;
     } else {
       alert('商品库存不能为空！')
     }
   }

   function cl () { // 清空的函数
      checkIndex = 0;
      list.forEach(item => {
        item.value = "";
      })
      document.querySelector('ol').innerHTML = "";
      render();
   }
</script>
